<!-- 播放监控 -->
<template>
  <list
    ref="list"
    table-ref="playlist"
    :table-tag="tableName"
    class="center"
    style="width: 100%"
    height="calc(48vh)"
    :list-data="tableData"
    :has-select="false"
    :list-cols="colData"
    :init-cols-props.sync="initColsProps"
    :action-opts="actionOpts"
    @sort="handleSort"
  >
    <template slot="prioritySlot" slot-scope="{ row }">
      {{ row.priority | priorityFilter(te) }}
    </template>
    <template slot="actionSlot" slot-scope="{ row }">
      <el-button
        class="detail-button"
        type="primary"
        size="mini"
        @click.native="handleDetailClick(row)"
        >{{ $t('查看') }}</el-button
      >
    </template>
  </list>
</template>
<script>
import DeviceMonitorApi from '@/api/device'
import List from '@/components/List'
export default {
  name: 'PlayMonitorInfo',
  components: {
    List,
  },
  data() {
    const headerContextMenus = {
      width: '120px',
      items: ['sortUp', 'sortDown', 'line', 'cols'],
    }
    return {
      // tableData: [
      //   {
      //     id: '1',
      //     playTime: '121212',
      //     programScheduleName: '21323132',
      //     programName: '2313',
      //   },
      // ],
      tableData:[],
      colData: [
        { label: '播放时间', prop: 'playTime' },
        { label: '发布名称', prop: 'programScheduleName' },
        { label: '播放节目', prop: 'programName' },
        { label: '屏幕名称', prop: 'screenName' },
        { label: '播放类型', prop: 'priority', slot: true },
      ],
      initColsProps: [
        'playTime',
        'programScheduleName',
        'programName',
        'screenName',
        'priority',
      ],
      actionOpts: {
        name: '查看',
        show: true,
        align: 'center',
        minwidth: '50px',
        hidEditBtn: true,
        hidDelBtn: true,
        slot: true,
      },
      tableName: 'playMonitorTable',
      initHeadmuneFlag: false,
    }
  },
  props: {
    id: {
      default: 0,
    },
  },
  filters: {
    priorityFilter(val,te) {
      let msg = ''
      switch (val) {
        case 0:
          msg = te('缺省')
          break
        case 1:
          msg = te('普通')
          break
        case 3:
          msg = te('优先')
          break
        case 4:
          msg = te('急迫')
          break
      }
      return msg
    },
  },
  mounted() {
    this.doPlayMonitorList()
  },
  created() {
    this.$eventBus.$on('doPlayMonitorInfoRefresh', this.doPlayMonitorList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doPlayMonitorInfoRefresh')
  },
  methods: {
    async doPlayMonitorList() {
      
      const res = await DeviceMonitorApi.loadPlayList({ terminalId: this.id })
      if (res) {
        this.tableData = res
      }
    },
    // 排序
    handleSort(sortInfo) {
      // console.log('sortInfo----', sortInfo)
      if (sortInfo.type == 'ASC') {
        this.$refs.list.$refs.playlist.sort(sortInfo.prop, 'ascending')
      } else {
        this.$refs.list.$refs.playlist.sort(sortInfo.prop, 'descending')
      }
    },

    async handleDetailClick(row) {

      this.$store.dispatch('media/getScheduleXml', { programId: row.programId }).then((res) => {
        if(res) {
          this.$router.push({name: "play-detail", params: {xmlStr: res}})
        }
      })
    },

    te(arg) {
        const hasKey = this.$te(arg)
        if (hasKey) {
        const result = this.$t(arg)
        return result
        }
        return arg
    },

  },
  watch: {
    id(val) {
      this.id = val
      this.doPlayMonitorList()
    },
  },
}
</script>